<template>

  <div :class="{'header-title-container': true,'isstack':isstack}">
      <!-- 新增的平行四边形容器 -->
      <div class="parallelogram-container">
        <div class="parallelogram blue1"></div>
        <div class="parallelogram blue2"></div>
        <div class="card-title">{{title}}</div>
      </div>
      <div class="gradient-line"></div>
      <!-- 新增的三段式渐变 div -->
    <div class="multi-gradient-line"></div>
    </div>

    <div class="slot-wrapper">
      <div :class="['isstack', isStack]"> 
      <slot></slot>
    </div>
    </div>


</template>
<script setup>
import { defineProps } from 'vue';

defineProps({
  title: {
    type: String,
    required: true,
    default: '默认标题'  
  },
  isstack: {
    type: Boolean,
    default: false
  }
});
</script>
<style scoped>

.header-title-container{
  width: 100%;
  --scale: 80; /* 默认缩放为 100%，可外部传入控制 */
  position: relative;
  margin-bottom: calc(var(--scale) * 1 / 100 * 1vw);
}

.parallelogram-container {
  position: relative; /* 或 absolute */
  z-index: 10;
  display: flex;
  justify-content: start;
  align-items: baseline;
  height: calc(var(--scale) * 5 / 100 * 1vw);
  gap: calc(var(--scale) * 1 / 100 * 1vw);
}

.parallelogram {
  width: calc(var(--scale) * 1.6 / 100 * 1vw);
  height: calc(var(--scale) * 2.0 / 100 * 1vw);
  background-color: #1EA2FF; /* 默认颜色 */
  transform: skewX(-20deg); /* 创建平行四边形效果 */
  /* border-radius: 8px; */
}

.blue1 {
  background-color: #1EA2FF;
}

.blue2 {
  background-color: #09E0F3;
}
.card-title{
    text-align: center;
    font-size: calc(var(--scale) * 3 / 100 * 1vw);
    font-weight: 500;
    letter-spacing: calc(var(--scale) * 3 / 100 * 1px); /* px 更适合固定间距 */
    color: #fff;
    /* text-shadow: 0 0 calc(var(--scale) * 4 / 100 * 1vw) #00eaff,
              0 0 calc(var(--scale) * 1 / 100 * 1vw) #fff,
              0 calc(var(--scale) * 1 / 100 * 1vw) calc(var(--scale) * 4 / 100 * 1vw) #1e3c5a; */
    filter: brightness(1.2);
    user-select: none;
}
.gradient-line {
  z-index: 1;
  position: absolute;
  top: calc(var(--scale) * 1.5 / 100 * 1vw);
  width: 100%; /* 充满父容器宽度 */
  height: calc(var(--scale) * 2.5 / 100 * 1vw);
  transform: skewX(-20deg); /* 创建平行四边形效果*/ 
  background: linear-gradient(
    to right,
    rgba(39, 210, 255, 0.36) 0%,   /* 左侧 73% 透明（即 1 - 0.73 = 0.27） */
    rgba(39, 210, 255, 0) 100%     /* 右侧完全不透明 */
  );
  
}
.multi-gradient-line {
  z-index: 1;
  position: absolute;
  top: calc(var(--scale) * 2.5 / 100 * 1vw);
  width: 100%;
  height: calc(var(--scale) * 2.5 / 100 * 1vw);
  transform: skewX(-20deg); /* 创建平行四边形效果*/
  background: linear-gradient(
    to right,
    rgba(38, 130, 255, 0) 0%,     /* 左侧完全不透明 */
    rgba(38, 130, 255, 0.36) 50%, /* 中间 62% 透明（即 1 - 0.62 = 0.38） */
    rgba(38, 130, 255, 0) 100%     /* 右侧完全不透明 */
  );
}
.slot-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: calc(var(--scale) * 5 / 100 * 1vw);
  /* text-align: center; */
  color: #fff;
  border:2px solid #2da2d4;
  /* border:1px   #2da2d4; */
  background: linear-gradient(
    to bottom,
    rgba(0, 71, 144, 0)  0%,     /* 左侧完全不透明 */
    0%,     /* 左侧完全不透明 */
    rgba(0, 60, 130, 0.36) 100%     /* 右侧完全不透明 */
  );
}

.isstack{
  margin-bottom: calc(var(--scale) * (-2) / 100 * 1vw);
}
.slot-wrapper .isstack{
  position: relative;
  top: 3vw;
}
</style>
